﻿<div class="container">
  <div class="block-header">
    <h2>Form Examples</h2>

    <ul class="actions">
      <li>
        <a href="">
          <i class="zmdi zmdi-trending-up"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="zmdi zmdi-check-all"></i>
        </a>
      </li>
      <li class="dropdown" dropdown>
        <a href="" dropdown-toggle>
          <i class="zmdi zmdi-more-vert"></i>
        </a>

        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <a href="">Refresh</a>
          </li>
          <li>
            <a href="">Manage Widgets</a>
          </li>
          <li>
            <a href="">Widgets Settings</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="card">
    <div class="card-header">
      <h2>
        Basic Example <small>
          Individual form controls automatically receive some global styling. All textual 'input', 'textarea', and 'select' elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
        </small>
      </h2>
    </div>

    <div class="card-body card-padding">
      <form role="form">
        <div class="form-group fg-line">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control input-sm" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group fg-line">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control input-sm" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">
            <i class="input-helper"></i>
            Don't forget to check me out
          </label>
        </div>

        <button type="submit" class="btn btn-primary btn-sm m-t-10">Submit</button>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h2>Inline Form <small>Add '.form-inline' to your 'form' for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.</small></h2>
    </div>

    <div class="card-body card-padding">
      <form class="row" role="form">
        <div class="col-sm-3">
          <div class="form-group fg-line">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" class="form-control input-sm" id="exampleInputEmail2" placeholder="Enter email">
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group fg-line">
            <label class="sr-only" for="exampleInputPassword2">Password</label>
            <input type="password" class="form-control input-sm" id="exampleInputPassword2" placeholder="Password">
          </div>
        </div>

        <div class="col-sm-2">
          <div class="checkbox">
            <label>
              <input type="checkbox" value="">
              <i class="input-helper"></i>
              Remember me
            </label>
          </div>
        </div>

        <div class="col-sm-4">
          <button type="submit" class="btn btn-primary btn-sm m-t-5">Sign in</button>
        </div>
      </form>
    </div>
  </div>

  <div class="card">

    <form class="form-horizontal" role="form">
      <div class="card-header">
        <h2>Horizontal Form <small>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding '.form-horizontal' to the form. Doing so changes '.form-groups' to behave as grid rows, so no need for '.row'.</small></h2>
      </div>

      <div class="card-body card-padding">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <div class="fg-line">
              <input type="email" class="form-control input-sm" id="inputEmail3" placeholder="Email">
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
          <div class="col-sm-10">

            <div class="fg-line">
              <input type="password" class="form-control input-sm" id="inputPassword3" placeholder="Password">
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">
                <i class="input-helper"></i>
                Remember me
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary btn-sm">Sign in</button>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="card">
    <div class="card-header">
      <h2>Multi Column <small>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</small></h2>
    </div>

    <div class="card-body card-padding">
      <div class="row">
        <div class="col-xs-3">
          <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-3">
          </div>
        </div>
        <div class="col-xs-3">
          <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-3">
          </div>
        </div>
        <div class="col-xs-3">
          <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-3">
          </div>
        </div>
        <div class="col-xs-3">
          <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-3">
          </div>
        </div>
        <div class="col-xs-4">
          <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-4">
          </div>
        </div>
        <div class="col-xs-4">
          <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-4">
          </div>
        </div>
        <div class="col-xs-4">
          <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-4">
          </div>
        </div>
        <div class="col-xs-6">
          <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-6">
          </div>
        </div>
        <div class="col-xs-6">
          <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-6">
          </div>
        </div>
        <div class="col-xs-12">
          <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-12">
          </div>
        </div>
      </div>
    </div>
  </div>

</div>